<!-- 项目详情 -->
<template>
	<view class="peojectDetail">
		<!-- banner区 -->
		<view class="house_banner">
			<swiper
				class="swiper"
				:duration="duration"
				:autoplay="true"
				:circular="true"
				style="height: 100%;"
				:indicator-dots="true"
				indicator-color="#585e65"
				indicator-active-color="#a3aab2"
			>
				<swiper-item v-for="item in 4" :key="item"><image :src="'https://community.chuangxiangdianli.com/images/neighborimg/housekeeping/banne.png'" mode=""></image></swiper-item>
			</swiper>
		</view>
		<view class="content">
			<!-- 基本介绍 -->
			<view class="list1">
				<view class="title"><view>基本介绍</view></view>
				<view class="table">
					<view class="tr">
						<text>保洁项目</text>
						<text>价格信息</text>
					</view>
					<view class="tr">
						<text>日常保洁4小时</text>
						<text>180元/4小时</text>
					</view>
					<view class="tr">
						<text>日常保洁8小时</text>
						<text>180元/4小时</text>
					</view>
					<view class="tr">
						<text>日常保洁10小时</text>
						<text>180元/4小时</text>
					</view>
				</view>
			</view>
			<!-- 服务信息 -->
			<view class="list1">
				<view class="title"><view>服务信息</view></view>
				<view class="table">
					<view class="tr">
						<text>附加信息</text>
						<text>项目明细</text>
					</view>
					<view class="tr">
						<text>服务范围 无</text>
						<text>项目明细：厨房-卫生间-浴室</text>
					</view>
					<view class="tr">
						<text>服务范围 无</text>
						<text>项目明细：厨房-卫生间-浴室</text>
					</view>
					<view class="tr">
						<text>服务时间 12:00-21:23</text>
						<text>项目明细：无</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_btn">
			<view class="btn">
				<image src="https://community.chuangxiangdianli.com/images/neighborimg/housekeeping/jia_phone_q.png" mode=""></image>
				拨打电话
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			duration: 500
		};
	}
};
</script>

<style lang="scss">
.peojectDetail {
	.house_banner {
		height: 400rpx;
	}
	.bottom_btn {
		width: 100%;
		.btn {
			width: 90%;
			height: 90rpx;
			background: #ff7430;
			border-radius: 45px;
			margin-left: 5%;
			text-align: center;
			line-height: 90rpx;

			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			image{
				width: 44rpx;
				height:44rpx;
				margin-right:30rpx
			}
		}
	}
	.content {
		width: 100%;
		margin-bottom: 40rpx;
		.list1 {
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx;
			.title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 42rpx;
				margin-bottom: 20rpx;
				view {
					width: 120rpx;
					background: url(https://community.chuangxiangdianli.com/images/neighborimg/housekeeping/biejing.png);
					background-size: 100%, 50%;
					background-repeat: no-repeat; //不平铺
					background-position-y: bottom; //背景图位置
				}
			}
			.table {
				.tr {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					height: 70rpx;
					border: 1rpx solid #b5b5b5;
					border-bottom: none;
					border-top: none;
					color: #999999;
					line-height: 70rpx;
					text:nth-child(1) {
						display: inline-block;
						width: 40%;
						height: 100%;
						box-sizing: border-box;
						padding-left: 40rpx;
						border-right: 1rpx solid #b5b5b5;
						border-bottom: 1rpx solid #b5b5b5;
					}
					text:nth-child(2) {
						display: inline-block;
						width: 60%;
						height: 100%;
						box-sizing: border-box;
						padding-left: 40rpx;
						border-bottom: 1rpx solid #b5b5b5;
					}
					text {
						overflow-x: auto;
						white-space: nowrap;
					}
				}
				.tr:nth-child(1) {
					color: #333333;
					background: #f5f9fc;
					border-top: 1rpx solid #b5b5b5;
				}
			}
		}
	}
}
</style>
